{% load seahub_tags i18n %}

<div id="tabs" class="tab-tabs">
<div class="hd">
    <ul class="tab-tabs-nav fleft">
      {% if user.permissions.can_add_repo %}
        <li class="tab"><a href="#my-own-repos" class="a" id="mylib-tab">{% trans "Mine" %}</a></li>
        {% if ENABLE_SUB_LIBRARY and sub_lib_enabled %}
        <li class="tab"><a href="#my-sub-repos" class="a" id="sublib-tab">{% trans "Sub-libraries" %}</a></li>
        {% endif %}
      {% endif %}
        <li class="tab"><a href="#repos-shared-to-me" class="a" id="shared-lib-tab">{% trans "Shared" %}</a></li>
        <li class="tab"><a href="#group-repos" class="a" id="grp-lib-tab">{% trans "Group" %}</a></li>
    </ul>
    <div class="fright">
        <button id="repo-create" class="hide"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Library" %}</span></button>
        {% if ENABLE_SUB_LIBRARY and sub_lib_enabled %}
        <button id="sub-lib-create" class="hide" title="{% trans "New Sub-library" %}"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Sub-library" %}</span></button>
        {% endif %}
    </div>
</div>
<div id="my-own-repos" class="hide">
{% if owned_repos %}
<table class="repo-list">{# 'repo-list': for repo which has 'repo-delete-btn' #}
    <tr>
        <th width="4%"><!--icon--></th>
        <th width="24%">{% trans "Name" %} <span id="my-owned-repo-list-name-down" class="icon-caret-up cspt"></span> <span id="my-owned-repo-list-name-up" class="icon-caret-down cspt hide"></span></th>
        <th width="38%">{% trans "Description" %}</th>
        <th width="22%">{% trans "Last Update" %} <span id="my-owned-repo-list-time-up" class="icon-caret-up cspt hide"></span> <span id="my-owned-repo-list-time-down" class="icon-caret-down cspt"></span></th>
        <th width="12%">{% trans "Operations" %}</th>
    </tr>
    {% for repo in owned_repos %}
    {% if not ENABLE_SUB_LIBRARY or not repo.is_virtual %}
    <tr data-repo_name="{{repo.props.name}}" data-time="{% if repo.latest_modify %}{{ repo.latest_modify }}{% else %}0{% endif %}">
        {% if repo.encrypted %}
        <td><img src="{{MEDIA_URL}}img/sync-folder-encrypt-20.png" title="{% trans "Read-Write" %}" alt="{% trans "directory icon" %}" /></td>
        {% else %}
        <td><img src="{{MEDIA_URL}}img/sync-folder-20.png?t=1387267140" title="{% trans "Read-Write" %}" alt="{% trans "directory icon" %}" /></td>
        {% endif %}
        <td><a href="{% url 'repo' repo.props.id %}">{{ repo.props.name }}</a></td>
        <td>{{ repo.props.desc }}</td>
        {% if repo.latest_modify %}
        <td>{{ repo.latest_modify|translate_seahub_time }}</td>
        {% else %}
        <td>--</td>
        {% endif %}
        <td data-id="{{ repo.props.id }}" data-name="{{ repo.props.name }}">
            <div>
                <img src="{{MEDIA_URL}}img/share_20.png" alt="" class="repo-share-btn op-icon vh" title="{% trans "Share" %}" />
                <img src="{{MEDIA_URL}}img/rm.png" class="repo-delete-btn op-icon vh" title="{% trans "Delete" %}" />
            </div>
        </td>
    </tr>
    {% endif %}
    {% endfor %}
</table>
{% else %}
<div class="empty-tips">
  <h2 class="alc">{% trans "You have not created any libraries" %}</h2>
  <p>{% trans "You can create a library to organize your files. For example, you can create one for each of your projects. Each library can be synchronized and shared separately." %}</p>
</div>
{% endif %}
</div>

{% if ENABLE_SUB_LIBRARY and sub_lib_enabled %}
<div id="my-sub-repos" class="hide">
{% if sub_repos %}
<table class="repo-list">
    <tr>
        <th width="4%"><!--icon--></th>
        <th width="24%">{% trans "Name" %} <span id="my-sub-repo-list-name-down" class="icon-caret-up cspt"></span> <span id="my-sub-repo-list-name-up" class="icon-caret-down cspt hide"></span></th>
        <th width="38%">{% trans "Origin" %}</th>
        <th width="22%">{% trans "Last Update" %} <span id="my-sub-repo-list-time-up" class="icon-caret-up cspt hide"></span> <span id="my-sub-repo-list-time-down" class="icon-caret-down cspt"></span></th>
        <th width="12%">{% trans "Operations" %}</th>
    </tr>
    {% for repo in sub_repos %}
    <tr data-repo_name="{{repo.props.name}}" data-time="{% if repo.latest_modify %}{{ repo.latest_modify }}{% else %}0{% endif %}">
        {% if repo.encrypted %}
        <td><img src="{{MEDIA_URL}}img/sync-folder-encrypt-20.png" title="{% trans "Read-Write" %}" alt="{% trans "directory icon" %}" /></td>
        {% else %}
        <td><img src="{{MEDIA_URL}}img/sync-folder-20.png?t=1387267140" title="{% trans "Read-Write" %}" alt="{% trans "directory icon" %}" /></td>
        {% endif %}
        <td><a href="{% url 'repo' repo.id %}">{{ repo.name }}</a></td>
        <td><a href="{{ SITE_ROOT }}repo/{{ repo.origin_repo_id}}/?p={{ repo.origin_path }}">{{ repo.abbrev_origin_path }}</a></td>
        {% if repo.latest_modify %}
        <td>{{ repo.latest_modify|translate_seahub_time }}</td>
        {% else %}
        <td>--</td>
        {% endif %}
        <td data-id="{{ repo.props.id }}" data-name="{{ repo.props.name }}">
            <div>
                {% if repo.is_original_owner %}
                <img src="{{MEDIA_URL}}img/share_20.png" alt="" class="repo-share-btn op-icon vh" title="{% trans "Share" %}" />
                {% endif %}
                <img src="{{MEDIA_URL}}img/rm.png" class="repo-delete-btn op-icon vh" title="{% trans "Delete" %}" />
            </div>
        </td>
    </tr>
    {% endfor %}
</table>
{% else %}
<div class="empty-tips">
  <h2 class="center-contents">{% trans "You have not created any sub-libraries" %}</h2>
  <p>{% trans "You can create a sub-library from a directory inside a library. A sub-library can be independently synced and shared. Files in the sub-library will be automatically kept in sync with those in the directory of the origin library." %}</p>
</div>
{% endif %}
</div>
{% endif %}

<div id="repos-shared-to-me" class="hide">
    <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
    <table class="hide">
        <tr>
            <th width="4%"><!--icon--></th>
            <th width="20%">{% trans "Name" %} <span id="be-shared-repo-list-name-down" class="icon-caret-up cspt"></span> <span id="be-shared-repo-list-name-up" class="icon-caret-down cspt hide"></span></th>
            <th width="33%">{% trans "Description" %}</th>
            <th width="15%">{% trans "Last Update" %} <span id="be-shared-repo-list-time-up" class="icon-caret-up cspt hide"></span> <span id="be-shared-repo-list-time-down" class="icon-caret-down cspt"></span></th>
            <th width="15%">{% trans "Shared By" %}</th>
            <th width="13%">{% trans "Operations" %}</th>
        </tr>
    </table>
</div>

<div id="group-repos" class="hide">
    <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
</div>

</div>

<table id="new-repo" class="hide">
    <tr>
        <th width="4%"><!--icon--></th>
        <th width="24%">{% trans "Name" %}</th>
        <th width="40%">{% trans "Description" %}</th>
        <th width="18%">{% trans "Last Update" %}</th>
        <th width="14%">{% trans "Operations" %}</th>
    </tr>
    <tr class="repo-item">
        <td><img src="{{MEDIA_URL}}img/sync-folder-20.png?t=1387267140" title="{% trans "Read-Write" %}" alt="{% trans "directory icon" %}" /></td>
        <td><a href="{{ SITE_ROOT }}repo/{{ repo.props.id }}/">{{ repo.props.name }}</a></td>
        <td>{{ repo.props.desc }}</td>
        <td>{% trans "Just now" %}</td>
        <td data-id="{{ repo.props.id }}" data-name="{{ repo.props.name }}">
            <img src="{{MEDIA_URL}}img/share_20.png" alt="" class="repo-share-btn op-icon vh" title="{% trans "Share" %}" />
            <img src="{{MEDIA_URL}}img/rm.png" class="repo-delete-btn op-icon vh" title="{% trans "Delete" %}" />
        </td>
    </tr>
</table>
{% include 'snippets/repo_del_popup.html' %}
